<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="自习室" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="zixishiId">
              <j-dict-select-tag @change="zixishiChange" type="list" v-model="model.zixishiId" dictCode="sr_zixishi,name,id"
                placeholder="请选择自习室" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="区域" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="quyuId">
              <j-dict-select-tag type="list" v-model="model.quyuId" :dictCode="`sr_quyu,name,id,(zixishi_id = '${model.zixishiId}' )`" placeholder="请选择区域" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model="model.name" placeholder="请输入名称"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="原金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="origAmt">
              <a-input-number v-model="model.origAmt" placeholder="请输入原金额" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="优惠后金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="disAmt">
              <a-input-number v-model="model.disAmt" placeholder="请输入优惠金额" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cnt">
              <a-input-number :min="0" v-model="model.cnt" placeholder="请输入数量" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="限购数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="limitCnt">
              <a-input-number :min="0" v-model="model.limitCnt" placeholder="请输入限购数量" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="有效期开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="effectStartDate">
              <j-date placeholder="请选择有效期开始时间" v-model="model.effectStartDate" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="有效期结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="effectEndDate">
              <j-date placeholder="请选择有效期结束时间" v-model="model.effectEndDate" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="开始使用时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="useStartTime">
              <j-time placeholder="请选择开始使用时间" v-model="model.useStartTime" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="结束使用时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="useEndTime">
              <j-time placeholder="请选择结束使用时间" v-model="model.useEndTime" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="有效天数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="days">
              <a-input-number placeholder="请输入有效天数" v-model="model.days" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
              <j-dict-select-tag type="list" v-model="model.status" dictCode="coupon_status" placeholder="请选择状态" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="时长" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="duration">
              <a-input-number v-model="model.duration" placeholder="请输入时长" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="type">
              <j-dict-select-tag type="list" v-model="model.type" dictCode="coupon_type" placeholder="请选择类型" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="付款方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="paytype">
              <a-checkbox-group v-model="model.paytype" placeholder="请选择付款方式" >
                <a-checkbox value="1">余额</a-checkbox>
                 <a-checkbox value="0">微信</a-checkbox>
              </a-checkbox-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="顺序" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isort">
              <a-input-number :min="0" v-model="model.isort" placeholder="请输入顺序" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="多次使用" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="multipleFlag">
              <j-dict-select-tag type="list" v-model="model.multipleFlag" dictCode="yn" placeholder="请选择是否允许多次使用" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="美团券" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="dealId">
                <a-select v-model="model.dealId">
                    <a-select-option v-for="d in meituanData" :key="d.value" :value="d.value">{{ d.text }}</a-select-option>
                </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
  import {
    httpAction,
    getAction
  } from '@/api/manage'
  import {
    validateDuplicateValue
  } from '@/utils/util'

  export default {
    name: 'CouponForm',
    components: {},
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data() {
      return {
        meituanData: [],
        model: {},
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 5
          },
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 16
          },
        },
        confirmLoading: false,
        validatorRules: {
          zixishiId: [{
            required: true,
            message: '请输入自习室!'
          }, ],
          quyuId: [{
            required: true,
            message: '请输入区域!'
          }, ],
          name: [{
            required: true,
            message: '请输入名称!'
          }, ],
          origAmt: [{
              required: true,
              message: '请输入原金额!'
            },
            {
              pattern: /^(([1-9][0-9]*)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/,
              message: '请输入正确的金额!'
            },
          ],
          disAmt: [{
              required: true,
              message: '请输入优惠金额!'
            },
            {
              pattern: /^(([1-9][0-9]*)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/,
              message: '请输入正确的金额!'
            },
          ],
          cnt: [{
              required: true,
              message: '请输入数量!'
            },
            {
              pattern: /^-?\d+$/,
              message: '请输入整数!'
            },
          ],
        },
        url: {
          add: "/coupon/coupon/add",
          edit: "/coupon/coupon/edit",
          queryById: "/coupon/coupon/queryById"
        }
      }
    },
    computed: {
      formDisabled() {
        return this.disabled
      },
    },
    created() {
      //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      this.meituanSearch();
    },
    methods: {
      
      meituanSearch() {
        // fetch(value, data => (this.data = data));
        httpAction('/meituan/queryshopdeal', this.model, 'get').then((res) => {
          console.log(res)
          if (res.success) {
            const result = res.result;
            const data = [];
            result.forEach(r => {
              data.push({
                value: r.dealId,
                text: r.title,
              });
            });
            this.meituanData = data;
          } else {
            that.$message.warning(res.message);
          }
        })
      },
      zixishiChange(val){
        console.log(val);
        // this.model.quyuId=''
      },
      add() {
        this.edit(this.modelDefault);
      },
      edit(record) {
        this.model = Object.assign({}, record);
        if(this.model.paytype)
          this.model.paytype = this.model.paytype.split(',')
        this.visible = true;
      },
      submitForm() {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if (!this.model.id) {
              httpurl += this.url.add;
              method = 'post';
            } else {
              httpurl += this.url.edit;
              method = 'put';
            }
            console.log(this.model);
            let payType = this.model.paytype;
            if(payType)
              this.model.paytype = payType.join(',');
            httpAction(httpurl, this.model, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.$emit('ok');
              } else {
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }

        })
      },
    }
  }
</script>